<template>
  <!-- <p>所属事业群：经营管理部</p>
                  <span class="label float-right label-primary">TG6</span>
  <span class="label float-right label-primary">A类</span>-->
  <div>
    <div>
      <h1 class="text-success">持续集成汇总</h1>
    </div>
    <hr>
    <deptSelect
      ref="dept"
      v-if="hackset"
      v-on:search="search"
      :droplist1="datepicker_info.droplist1"
    ></deptSelect>
    <div
      class="row ibox-content"
      v-bind:class="{ 'sk-loading': refreshing_project_kanban }"
      style="background-color: #eeeeee; margin-left:0px; margin-right:0px;"
    >
      <div class="sk-spinner sk-spinner-wave">
        <div class="sk-rect1"></div>
        <div class="sk-rect2"></div>
        <div class="sk-rect3"></div>
        <div class="sk-rect4"></div>
        <div class="sk-rect5"></div>
      </div>
      <info_label
        id="devops1"
        type="总数/运行中"
        title="项目数"
        :num="results.total_proj"
        :num1="results.activate_proj"
        sub="个"
        to_sub="总数"
        :cls="common.success"
      ></info_label>
      <info_label
        id="devops2"
        type="总个数"
        title="统计项目(已导入)"
        :num="results.imported_proj"
        sub="个"
        to_sub="总数"
        :cls="common.success"
      ></info_label>
    </div>
    <div class="tabs-container">
      <ul class="nav nav-tabs" role="tablist">
        <li>
          <a class="nav-link active" data-toggle="tab" href="#main1">构建效率统计</a>
        </li>
        <li>
          <a class="nav-link" data-toggle="tab" href="#main2">代码检查统计</a>
        </li>
        <li>
          <a class="nav-link" data-toggle="tab" href="#main3">自动化测试统计</a>
        </li>
        <li>
          <a class="nav-link" data-toggle="tab" href="#main4">版本发布统计</a>
        </li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" id="main1" class="tab-pane active">
          <div class="panel-body" style="background-color: #eeeeee;">
            <histogram :id="top_build_info.barchart1.id"
              :title="top_build_info.barchart1.title"
              :labels="top_build_info.labels"
              :type="top_build_info.barchart1.type"
              :datasets="top_build_info.barchart1.datasets"
              :date="top_build_info.date"
              :options="top_build_info.barchart1.options">
            </histogram>
            <div class="row">
              <info_label
                id="devops4"
                type="总次数"
                title="构建"
                :num="results.build"
                sub="次"
                to_sub="次数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops9"
                type="平均时长"
                title="构建"
                :num="results.av_duration"
                sub="分钟"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops3"
                type="平均时长"
                title="构建等待时长"
                :num="results.wait_time"
                sub="分钟"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
            </div>
            <div class="row">
              <info_label
                id="devops5"
                type="总次数"
                title="Daily-build"
                :num="results.daily_build"
                sub="次"
                to_sub="次数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops6"
                type="总次数"
                title="Submit-build"
                :num="results.submit_build"
                sub="次"
                to_sub="次数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops7"
                type="总次数"
                title="Verify-build"
                :num="results.verify_build"
                sub="次"
                to_sub="次数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops8"
                type="总次数"
                title="Release-build"
                :num="results.release_build"
                sub="次"
                to_sub="次数"
                :cls="common.success"
              ></info_label>
            </div>
            <div class="row">
              <info_label
                id="devops10"
                type="平均时长"
                title="Daily-build"
                :num="results.daily_av_duration"
                sub="分钟"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops11"
                type="平均时长"
                title="Submit-build"
                :num="results.submit_av_duration"
                sub="秒"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops12"
                type="平均时长"
                title="Verify-build"
                :num="results.verify_av_duration"
                sub="分钟"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops13"
                type="平均时长"
                title="Release-build"
                :num="results.release_av_duration"
                sub="分钟"
                to_sub="时长"
                :cls="common.primary"
              ></info_label>
            </div>
            <lineChart
              v-if="chart_data"
              ref="chart1"
              id="buildrate"
              :chartData="chart_data"
              title="构建效率趋势(平均时长)"
              :labelsSet="labelsArr1"
              :y_keys="y_keys1"
            ></lineChart>
            <primary_table
              id="devops_table"
              ref="devops_table"
              :cols="devops_cols1"
              title="构建效率详情"
              :table_data="table_data"
              :show_keys="keys1"
            ></primary_table>
          </div>
        </div>
        <div role="tabpanel" id="main2" class="tab-pane">
          <div class="panel-body" style="background-color: #eeeeee;">
                <histogram :id="top_codecheck_info.barchart1.id"
                  :title="top_codecheck_info.barchart1.title"
                  :labels="top_codecheck_info.labels"
                  :type="top_codecheck_info.barchart1.type"
                  :datasets="top_codecheck_info.barchart1.datasets"
                  :date="top_codecheck_info.date"
                  :options="top_codecheck_info.barchart1.options">
                </histogram>
                <histogram :id="top_codecheck1_info.barchart1.id"
                  :title="top_codecheck1_info.barchart1.title"
                  :labels="top_codecheck1_info.labels"
                  :type="top_codecheck1_info.barchart1.type"
                  :datasets="top_codecheck1_info.barchart1.datasets"
                  :date="top_codecheck1_info.date"
                  :options="top_codecheck1_info.barchart1.options">
                </histogram>
            <div class="row">
              <info_label
                id="devops14"
                type="总次数"
                title="代码静态检查"
                :num="results.code_static_check"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops15"
                type="总次数"
                title="代码规范检查"
                :num="results.code_style_check"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops16"
                type="总次数"
                title="代码质量检查"
                :num="results.code_quality_check"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
            </div>
            <div class="row">
              <info_label
                id="devops17"
                type="总个数"
                title="代码静态检查错误"
                :num="results.code_static_check_errors"
                sub="个"
                to_sub="总数"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops18"
                type="总个数"
                title="代码规范检查错误"
                :num="results.code_style_check_errors"
                sub="个"
                to_sub="总数"
                :cls="common.primary"
              ></info_label>
              <info_label
                id="devops19"
                type="平均"
                title="圈复杂度"
                :num="results.av_complexity"
                sub="value"
                to_sub="平均"
                :cls="common.primary"
              ></info_label>
            </div>
            <lineChart
              v-if="chart_data"
              ref="chart2"
              id="codecheck"
              :chartData="chart_data"
              title="平均圈复杂度趋势"
              :labelsSet="labelsArr2"
              :y_keys="y_keys2"
            ></lineChart>
            <primary_table
              id="devops_table2"
              ref="devops_table2"
              :cols="devops_cols2"
              title="代码检查详情"
              :table_data="table_data"
              :show_keys="keys2"
            ></primary_table>
          </div>
        </div>
        <div role="tabpanel" id="main3" class="tab-pane">
          <div class="panel-body" style="background-color: #eeeeee;">
            <histogram :id="top_autotest_info.barchart1.id"
              :title="top_autotest_info.barchart1.title"
              :labels="top_autotest_info.labels"
              :type="top_autotest_info.barchart1.type"
              :datasets="top_autotest_info.barchart1.datasets"
              :date="top_autotest_info.date"
              :options="top_autotest_info.barchart1.options">
            </histogram>
            <div class="row">
              <info_label
                id="devops20"
                type="总次数"
                title="自动化测试次数"
                :num="results.test_count"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
            </div>
            <lineChart
              v-if="chart_data"
              ref="chart3"
              id="autotest"
              :chartData="chart_data"
              title="平均通过率趋势"
              :labelsSet="labelsArr3"
              :y_keys="y_keys3"
            ></lineChart>
            <primary_table
              id="devops_table3"
              ref="devops_table3"
              :cols="devops_cols3"
              title="自动化测试详情"
              :table_data="table_data"
              :show_keys="keys3"
            ></primary_table>
          </div>
        </div>
        <div role="tabpanel" id="main4" class="tab-pane">
          <div class="panel-body" style="background-color: #eeeeee;">
            <histogram :id="top_release_info.barchart1.id"
              :title="top_release_info.barchart1.title"
              :labels="top_release_info.labels"
              :type="top_release_info.barchart1.type"
              :datasets="top_release_info.barchart1.datasets"
              :date="top_release_info.date"
              :options="top_release_info.barchart1.options">
            </histogram>
            <div class="row">
              <info_label
                id="devops21"
                type="总次数"
                title="Daily版本"
                :num="results.daily_release"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops22"
                type="总次数"
                title="Release版本"
                :num="results.release_release"
                sub="次"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
              <info_label
                id="devops23"
                type="总个数"
                title="Patch集成"
                :num="results.patchNum"
                sub="个"
                to_sub="总数"
                :cls="common.success"
              ></info_label>
            </div>
            <lineChart
              v-if="chart_data"
              ref="chart4"
              id="release"
              :chartData="chart_data"
              title="版本发布频率趋势"
              :labelsSet="labelsArr4"
              :y_keys="y_keys4"
            ></lineChart>
            <primary_table
              id="devops_table4"
              ref="devops_table4"
              :cols="devops_cols4"
              title="版本发布详情"
              :table_data="table_data"
              :show_keys="keys4"
            ></primary_table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import deptSelect from '@/components/devops/deptSelect.vue';
import info_label from '@/components/devops/info_label.vue';
import primary_table from '@/components/devops/primary_table.vue';
import lineChart from '@/components/devops/lineChart.vue';
import histogram from '@/components/devops/histogram.vue';
export default {
	name: 'summary',
	data() {
		return {
			refreshing_project_kanban: true,
			hackset: false,
			results: {
				total_proj: null,
				imported_proj: null,
				wait_time: null,
				build: null,
				daily_build: null,
				submit_build: null,
				verify_build: null,
				release_build: null,
				av_duration: null,
				daily_av_duration: null,
				submit_av_duration: null,
				verify_av_duration: null,
				release_av_duration: null,
				code_static_check: null,
				code_style_check: null,
				code_quality_check: null,
				code_static_check_errors: null,
				code_style_check_errors: null,
				av_complexity: null,
				autotest: null,
				daily_release: null,
				release_release: null,
				patchNum: null,
				groups: []
			},
			datepicker_info: {
				droplist1: {
					title: '部门',
					data: []
				}
			},
			table_data: [],
			devops_cols1: [
				'项目名',
				'Submit平均构建时长(秒)',
				'Verify平均构建时长(秒)',
				'Daily平均构建时长(秒)',
				'Release平均构建时长(秒)'
			],
			keys1: [
				'project',
				'submit_av_duration',
				'verify_av_duration',
				'daily_av_duration',
				'release_av_duration'
			],
			devops_cols2: [
				'项目名',
				'平均圈复杂度',
				'代码规范错误总数',
				'代码静态错误总数',
				'代码重复总行数'
			],
			keys2: [
				'project',
				'complexity',
				'style_total_errors',
				'static_total_errors',
				'duplicate'
			],
			devops_cols3: [
				'项目名',
				'执行(次)',
				'平均测试通过率',
				'测试执行率',
				'测试覆盖率'
			],
			keys3: ['project', 'autotest', 'passingRate', 'excuativeRate', 'cover'],
			devops_cols4: [
				'项目名',
				'版本发布总数',
				'Daily版本发布总数(次)',
				'Release版本发布总数(次)'
			],
			keys4: ['project', 'release', 'daily_release', 'release_release'],
			common: {
				type: '总次数',
				type2: '总个数',
				success: 'success',
				info: 'info',
				primary: 'primary',
				subs: ['次', '时长', 'value', '个', '值', '行', '总行数'],
				to_sub: '总数',
				avg: '平均'
			},
			chart_data: {
				date: [],
				buildrate: {
					av_duration: [],
					daily_av_duration: [],
					submit_av_duration: [],
					verify_av_duration: [],
					release_av_duration: []
        },
				codecheck: {
					complexity: []
				},
				autotest: {
					passrate: []
				},
				release: {
					release: [],
					daily_release: [],
					release_release: []
				}
      },
      top_build_info: {
        date: 10,
        labels: [],
        barchart1: {
          id: ['div_12','canvas_12'],
          type: 'horizontalBar',
          title: 'Top10项目(平均构建时长)',
          datasets: [
                      {
                            label: "平均构建时长(秒)",
                            backgroundColor: 'rgba(150,205,205,0.7)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero:true
                  }
              }]
            }
          }
        },
      },
      top_release_info: {
        date: 20,
        labels: [],
        barchart1: {
          id: ['div_13','canvas_13'],
          type: 'horizontalBar',
          title: 'Top10项目(版本发布数)',
          datasets: [
                      {
                            label: "版本发布(个)",
                            backgroundColor: 'rgba(150,205,205,0.7)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero:true
                  }
              }]
            }
          }
        },
      },
      top_codecheck_info: {
        date: 30,
        labels: [],
        barchart1: {
          id: ['div_14','canvas_14'],
          type: 'horizontalBar',
          title: 'Top10项目(平均圈复杂度)',
          datasets: [
                      {
                            label: "平均圈复杂度",
                            backgroundColor: 'rgba(150,205,205,0.7)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero:true
                  }
              }]
            }
          }
        },
      },
      top_codecheck1_info: {
        date: 50,
        labels: [],
        barchart1: {
          id: ['div_15','canvas_15'],
          type: 'horizontalBar',
          title: 'Top10项目(错误数)',
          datasets: [
                      {
                            label: "错误数(个)",
                            backgroundColor: 'rgba(150,205,205,0.7)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero:true
                  }
              }]
            }
          }
        },
      },
      top_autotest_info: {
        date: 50,
        labels: [],
        barchart1: {
          id: ['div_16','canvas_16'],
          type: 'horizontalBar',
          title: 'Top10项目(平均通过率)',
          datasets: [
                      {
                            label: "平均通过率",
                            backgroundColor: 'rgba(150,205,205,0.7)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero:true
                  }
              }]
            }
          }
        },
      },
			labelsArr1: [
				'平均构建时长',
				'Daily-build',
				'Submit-build',
				'Verify-build',
				'Release-build'
			],
			y_keys1: [
				'av_duration',
				'daily_av_duration',
				'submit_av_duration',
				'verify_av_duration',
				'release_av_duration'
			],
			labelsArr2: ['平均圈复杂度'],
			y_keys2: ['complexity'],
			labelsArr3: ['平均测试通过率'],
			y_keys3: ['passrate'],
			labelsArr4: ['总版本发布', 'Daily版本', 'Release版本'],
			y_keys4: ['release', 'daily_release', 'release_release']
		};
	},
	components: {
		deptSelect,
		info_label,
		primary_table,
    lineChart,
    histogram
	},
	mounted() {
		var dates = $('#daterange').text();
		var arr = [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
		this.init_data(arr, 'all');
	},
	methods: {
		logout: function() {
			var app = this;
			localStorage.removeItem('user');
			localStorage.clear();
			app.$router.push('/login');
			app.$store.state.isLoggedIn = false;
		},
		init_data: function(dates, groups) {
			console.log('init data');
			const tokenData = JSON.parse(window.localStorage.getItem('user'));
			const headers = {
				Accept: 'application/json',
				token: tokenData.data.token
			};
			var url =
				process.env.VUE_APP_KANBAN_HOST +
				'/api/devops/summary?chart=true&table=true' +
        '&user=' + tokenData.data.username;
			if (dates) {
				url =
					url + '&start=' + dates[0] + '&end=' + dates[1] + '&group=' + groups;
			}
			var self = this;
			self.refreshing_project_kanban = true;
			this.$axios
				.get(url, { headers: headers })
				.then(function(response) {
					if (response.status == 200) {
            self.results = JSON.parse(response.data);
						if (self.results.code == 401) {
							console.log('当前状态401');
							self.logout();
						}
            self.refreshing_project_kanban = false;
            self.chart_data = self.results.chart_data;
            self.top_codecheck_info.labels = self.results.top_codecheck.project;
            self.top_codecheck_info.barchart1.datasets[0].data = self.results.top_codecheck.av_complexity;
            self.top_codecheck1_info.labels = self.results.top_codecheck1.project;
            self.top_codecheck1_info.barchart1.datasets[0].data = self.results.top_codecheck1.code_error;
            self.top_autotest_info.labels = self.results.top_autotest.project;
            self.top_autotest_info.barchart1.datasets[0].data = self.results.top_autotest.av_passrate;
            self.top_release_info.labels = self.results.top_release.project;
            self.top_release_info.barchart1.datasets[0].data = self.results.top_release.release;
            self.top_build_info.labels = self.results.top_build.project;
            self.top_build_info.barchart1.datasets[0].data = self.results.top_build.av_duration;
            self.top_autotest_info.date = self.top_autotest_info.date + 1;
            self.top_codecheck_info.date = self.top_codecheck_info.date + 1;
            self.top_release_info.date = self.top_release_info.date + 1;
            self.top_build_info.date = self.top_build_info.date + 1;
            self.top_codecheck1_info.date = self.top_codecheck1_info.date + 1;
						if (self.datepicker_info.droplist1.data.length < 1) {
							self.datepicker_info = {
								droplist1: {
									title: '部门',
									data: self.results.groups
								}
							};
							self.hackset = true;
						}
            self.table_data = self.results.table_data;
						self.update_ui();
					}
				})
				.catch(function(err) {
          self.refreshing_project_kanban = false;
					if (self.$axios.isCancel(err)) {
						console.log('Request canceled', err.message);
					} else {
						console.log(err.message);
					}
				});
		},
		update_ui: function() {
			this.$refs.devops_table.update_data(this.table_data.buildrate);
			this.$refs.devops_table2.update_data(this.table_data.codecheck);
			this.$refs.devops_table3.update_data(this.table_data.autotest);
			this.$refs.devops_table4.update_data(this.table_data.release);
			this.$refs.chart1.draw(this.chart_data);
			this.$refs.chart2.draw(this.chart_data);
			this.$refs.chart3.draw(this.chart_data);
			this.$refs.chart4.draw(this.chart_data);
		},
		search: function(dates, groups) {
			var arr = dates.split(' - ');
      if (groups.length == 0) {
        groups.push('all');
      }
			console.log('获取groups值', groups);
			this.init_data(arr, groups);
		}
	}
};
</script>
